<template>
  <a-modal :bodyStyle="{ padding: '0', 'max-height': '80vh', 'overflow-y': 'auto' }" :title="title" :width="1000" :maskClosable="false" :visible="visible" @cancel="visible = false" :button_loading="button_loading">
    <a slot="footer">
      <a-button @click="visible = false">{{ cancelText }}</a-button>
      <a-button v-if="okText == '保存' && actionType != 'view' " type="primary" @click="handleSubmit">{{
        okText
      }}</a-button>
    </a>

    <a-spin :indicator="indicator" :spinning="spinning" :tip="tip">
      <div class="spin-content">
        <a-form :form="form" :class="{ disable: actionType == 'view' ? true : false }">
          <a-row :gutter="16">
            <a-card size="small" title="基本信息" style="width: 100%; margin-bottom: 20px" :headStyle="{fontWeight: 'bold'}">
              <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="姓名">
                  <a-input v-decorator="[
                      'name',
                      { rules: [{ required: true, message: '请填写姓名!' }] },
                    ]" />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="手机/定位手机">
                  <a-input v-decorator="[
                      'tel',
                      { rules: [{ required: true, message: '请填写!' }] },
                    ]" />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="身份证号">
                  <a-input v-decorator="[
                      'IDNumber'
                    ]" />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="6">
                <a-form-item v-bind="formItemLayout" label="性别">
                  <a-select allowClear v-decorator="[
                        'gender',
                        
                      ]">
                    <a-select-option :value="null"> 未知 </a-select-option>
                    <a-select-option :value="1">男 </a-select-option>
                    <a-select-option :value="0"> 女 </a-select-option>
                  </a-select>

                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="6">
                <a-form-item v-bind="formItemLayout" label="民族">
                  <a-select showSearch optionFilterProp="children" :filterOption="filterOption" v-decorator="[
                        'nation',
                        
                      ]">
                    <a-select-option v-for="item in nationList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
                  </a-select>

                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="所属部门">
                  <!-- getDepartmentList -->
                  <treeselect :show-count="true" :options="Dept" v-model="deptValue" placeholder="请选择工作部门..." @select="handleSelect" :normalizer="normalizer">
                    <div slot="value-label" slot-scope="{ node }">
                      {{ node.raw.name ? node.raw.pName + "/" + node.raw.name : "" }}
                    </div>
                  </treeselect>
                  <!-- <a-tree-select v-model="deptValue" style="width: 100%" :tree-data="Dept" placeholder="请选择工作部门" /> -->
                  <!-- <a-select
                    showSearch
                    optionFilterProp="children"
                    :filterOption="filterOption"
                    v-decorator="[
                      'departmentid',
                      {
                        rules: [{ required: true, message: '请选择所属部门!' }],
                      },
                    ]"
                  >
                    <a-select-option
                      v-for="(item, index) in departmentList"
                      :key="item.value"
                      :value="item.value"
                      >{{ item.label }}</a-select-option
                    >
                  </a-select> -->
                  <!-- <a-input v-decorator="['nation', { rules: [{ required: true, message: '请填写民族!' }] }]" /> -->
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="家庭联系人">
                  <a-input v-decorator="[
                      'familyLinkman',
                     
                    ]" />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="家庭联系人电话">
                  <a-input v-decorator="[
                      'familyTel',
                     
                    ]" />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="联系人关系">
                  <a-input v-decorator="[
                      'contactRelationship',
                     
                    ]" />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="户 籍 地">
                  <a-input v-decorator="[
                      'domicile',
                      
                    ]" />
                </a-form-item>
              </a-col>
              <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="现居住地">
                  <a-input v-decorator="[
                      'currentResidence',
                      {
                        rules: [{ required: true, message: '请填写现居住地!' }],
                      },
                    ]" />
                </a-form-item>
              </a-col>

            </a-card>
            <a-card size="small" :title="personName" style="width: 100%" :headStyle="{fontWeight: 'bold'}">
              <!-- <a-col class="gutter-row" :span="12">
                <a-form-item v-bind="formItemLayout" label="人员类型">
                  <a-select showSearch optionFilterProp="children" :filterOption="filterOption" v-decorator="[
                      'personType',
                      {
                        rules: [{ required: true, message: '请选择人员类型!' }],
                      },
                    ]" @change="handleType">
                    <a-select-option v-for="item in personList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
                  </a-select>
                </a-form-item>
              </a-col> -->
              <template v-if="personType == 1">
                <a-col class="gutter-row" :span="12">
                  <a-form-item v-bind="formItemLayout" label="罪名">
                    <a-input v-decorator="[
                        'accusation',
                        { rules: [{ required: true, message: '请填写罪名!' }] },
                      ]" />
                  </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="12">
                  <a-form-item v-bind="formItemLayout" label="矫正类型">
                    <a-select showSearch optionFilterProp="children" :filterOption="filterOption" v-decorator="[
                        'correctionType',
                        {
                          rules: [
                            { required: true, message: '请选择矫正类型!' },
                          ],
                        },
                      ]">
                      <a-select-option v-for="item in correctionList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="12">
                  <a-form-item v-bind="formItemLayout" label="接收日期">
                    <a-date-picker format="YYYY-MM-DD HH:mm" v-decorator="[
                        'receiptDate',
                        {
                          rules: [
                            {
                              required: true,
                              message: '请选择接收日期!',
                            },
                          ],
                        },
                      ]" />
                  </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="12">
                  <a-form-item v-bind="formItemLayout" label="社区矫正时间起">
                    <a-date-picker format="YYYY-MM-DD HH:mm" v-decorator="[
                        'correctionTimeStart',
                        {
                          rules: [
                            {
                              required: true,
                              message: '请选择社区矫正时间起!',
                            },
                          ],
                        },
                      ]" />
                  </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="12">
                  <a-form-item v-bind="formItemLayout" label="社区矫正时间止">
                    <a-date-picker format="YYYY-MM-DD HH:mm" v-decorator="[
                        'correctionTimeEnd',
                        {
                          rules: [
                            {
                              required: true,
                              message: '请选择社区矫正时间止!',
                            },
                          ],
                        },
                      ]" />
                  </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="12">
                  <a-form-item v-bind="formItemLayout" label="工作单位">
                    <a-input placeholder="工作单位" v-decorator="[
                        'workUnit',
                        {
                          rules: [
                            { required: true, message: '请填写工作单位!' },
                          ],
                        },
                      ]" />
                  </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="12">
                  <a-form-item v-bind="formItemLayout" label="原判刑种及刑期">
                    <a-textarea placeholder="原判刑种及刑期" :auto-size="{ minRows: 3, maxRows: 30 }" v-decorator="['imprisonmentTerm']" />
                  </a-form-item>
                </a-col>
                <!-- <a-col class="gutter-row" :span="12">
                  <a-form-item v-bind="formItemLayout" label="籍贯">
                    <a-input placeholder="籍贯" v-decorator="[
                        'nativePlace',
                        { rules: [{ required: true, message: '请填写籍贯!' }] },
                      ]" />
                  </a-form-item>
                </a-col> -->

                <!-- <a-col class="gutter-row" :span="12">
                  <a-form-item v-bind="formItemLayout" label="定位手机">
                    <a-input placeholder="定位手机" v-decorator="[
                        'locationPhone',
                        {
                          rules: [
                            { required: true, message: '请填写定位手机!' },
                          ],
                        },
                      ]" />
                  </a-form-item>
                </a-col> -->
              </template>

              <template v-if="personType == 2">
                <a-col class="gutter-row" :span="12">
                  <a-form-item v-bind="formItemLayout" label="罪名">
                    <a-input v-decorator="[
                        'accusation',
                        { rules: [{ required: true, message: '请填写罪名!' }] },
                      ]" />
                  </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="12">
                  <a-form-item v-bind="formItemLayout" label="帮教等级">
                    <a-select showSearch optionFilterProp="children" :filterOption="filterOption" v-decorator="[
                        'level',
                        {
                          rules: [
                            { required: true, message: '请选择帮教等级!' },
                          ],
                        },
                      ]">
                      <a-select-option v-for="item in levelList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="12">
                  <a-form-item v-bind="formItemLayout" label="刑释/解矫日期">
                    <a-date-picker format="YYYY-MM-DD" v-decorator="[
                        'releaseDate',
                        {
                          rules: [
                            { required: true, message: '请选择刑释/解矫日期!' },
                          ],
                        },
                      ]" />
                  </a-form-item>
                </a-col>

                <a-col class="gutter-row" :span="12">
                  <a-form-item v-bind="formItemLayout" label="刑释/解矫来源">
                    <a-select showSearch optionFilterProp="children" :filterOption="filterOption" v-decorator="[
                        'releaseSrc',
                        {
                          rules: [
                            { required: true, message: '请选择刑释/解矫来源!' },
                          ],
                        },
                      ]">
                      <a-select-option v-for="item in xqluList" :key="item.value" :value="item.value">{{ item.label }}</a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>

                <!-- <a-col class="gutter-row" :span="12">
                  <a-form-item v-bind="formItemLayout" label="刑释/解矫来源">
                    <a-input v-decorator="[
                        'releaseSrc',
                        {
                          rules: [
                            { required: true, message: '请填写刑释/解矫来源!' },
                          ],
                        },
                      ]" />
                  </a-form-item>
                </a-col> -->
                <a-col class="gutter-row" :span="12">
                  <a-form-item v-bind="formItemLayout" label="帮教单位">
                    <a-input v-decorator="[
                        'helpUnit',
                        {
                          rules: [
                            { required: true, message: '请填写帮教单位!' },
                          ],
                        },
                      ]" />
                  </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="12">
                  <a-form-item v-bind="formItemLayout" label="是否签订帮教协议">
                    <a-select allowClear v-decorator="[
                        'isSignProtocol',
                        {
                          rules: [
                            {
                              required: true,
                              message: '请选择是否签订帮教协议!',
                            },
                          ],
                        },
                      ]">
                      <a-select-option :value="1"> 是 </a-select-option>
                      <a-select-option :value="0"> 否 </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="12">
                  <a-form-item v-bind="formItemLayout" label="是否必接必送重点对象">
                    <a-select allowClear v-decorator="[
                        'isTransport',
                        {
                          rules: [
                            {
                              required: true,
                              message: '请选择是否必接必送重点对象!',
                            },
                          ],
                        },
                      ]">
                      <a-select-option :value="1"> 是 </a-select-option>
                      <a-select-option :value="0"> 否 </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="12">
                  <a-form-item v-bind="formItemLayout" label="是否通报公安机关列管">
                    <a-select allowClear v-decorator="[
                        'isNotifyGA',
                        {
                          rules: [
                            {
                              required: true,
                              message: '请选择是否通报公安机关列管象!',
                            },
                          ],
                        },
                      ]">
                      <a-select-option :value="1"> 是 </a-select-option>
                      <a-select-option :value="0"> 否 </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
                <a-col class="gutter-row" :span="12">
                  <a-form-item v-bind="formItemLayout" label="是否发函公安机关协助查找">
                    <a-select allowClear v-decorator="[
                        'isSendSeek',
                        {
                          rules: [
                            {
                              required: true,
                              message: '请选择是否发函公安机关协助查找!',
                            },
                          ],
                        },
                      ]">
                      <a-select-option :value="1"> 是 </a-select-option>
                      <a-select-option :value="0"> 否 </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </template>

              <template v-if="personType == 3">
                <a-col class="gutter-row" :span="12">
                  <a-form-item v-bind="formItemLayout" label="原戒毒场所">
                    <a-input v-decorator="[
                        'drugRehabilitation',
                        {
                          rules: [
                            { required: true, message: '请填写原戒毒场所!' },
                          ],
                        },
                      ]" />
                  </a-form-item>
                </a-col>

                <!-- <a-col class="gutter-row" :span="12">
                  <a-form-item v-bind="formItemLayout" label="裁定社区康复期限">
                    <a-input-number id="inputNumber" v-decorator="['rehabilitationPeriod']" :min="1" :max="100" />
                  </a-form-item>
                </a-col> -->
                <a-col class="gutter-row" :span="12">
                  <a-form-item v-bind="formItemLayout" label="是否为戒毒培育典型">
                    <a-select allowClear v-decorator="[
                        'isTypical',
                        {
                          rules: [
                            {
                              required: true,
                              message: '请选择是否发函公安机关协助查找!',
                            },
                          ],
                        },
                      ]">
                      <a-select-option :value="1"> 是 </a-select-option>
                      <a-select-option :value="0"> 否 </a-select-option>
                    </a-select>
                  </a-form-item>
                </a-col>
              </template>

              <a-col class="gutter-row" :span="24" v-if="personType == 2">
                <a-form-item v-bind="formItemLayout1" label="备注">
                  <a-textarea placeholder="备注" :rows="4" v-decorator="['remark']" />
                </a-form-item>
              </a-col>
            </a-card>
          </a-row>
        </a-form>
      </div>
    </a-spin>
    <photo-modal ref="photomodal"></photo-modal>
  </a-modal>
</template>

<script>
import Vue from "vue";
import { ACCESS_TOKEN } from "@/store/mutation-types";
import { mapActions, mapGetters } from "vuex";
import PhotoModal from "@/views/photoModal";
import { getDepartmentByTypeSettings, getDepartmentList } from "@/api/department";
import Treeselect from '@riophae/vue-treeselect'
import { deleteChildrenIfNull } from '@/utils/util'

import { findType, personList } from "@/utils/device";
import { getDicList, getDicDropList } from "@/api/dict";

export default {
  components: { PhotoModal, Treeselect },
  props: {
    actionType: {
      type: String,
      required: false,
      default: "add",
    },
    personModalType: {
      type: Number,
      default: 1,
    }
  },
  async created () {
    // const data = await getDepartmentByTypeSettings();
    // this.departmentList = data
    //   .filter((el) => {
    //     return el.Id != -1;
    //   })
    //   .map((a) => {
    //     return {
    //       label: a.DepartmentName,
    //       value: a.Id,
    //     };
    //   });

    getDepartmentList().then(res => {
      this.treeData = res.children
      this.Dept = res.children
      this.removeChildrenIfNUll(this.Dept)
    })
    getDicDropList({ CategoryId: 2078 }).then((res) => {
      this.correctionList = res.data.map((el) => {
        return { value: el.ID, label: el.Title };
      });
    });
    getDicDropList({ CategoryId: 2080 }).then((res) => {
      this.levelList = res.data.map((el) => {
        return { value: el.ID, label: el.Title };
      });
    });
    getDicDropList({ CategoryId: 2085 }).then((res) => {
      this.xqluList = res.data.map((el) => {
        return { value: el.ID, label: el.Title };
      });
    });
    getDicDropList({ CategoryId: 18 }).then((res) => {
      this.nationList = res.data.map((el) => {
        return { value: el.ID, label: el.Title };
      });
    });
  },
  mounted () { },
  data () {
    return {
      a: null,
      action: "add",
      headers: {},
      currentId: null,
      CodeDisabled: false,
      required: false,
      indicator: <a-icon type="loading" style="font-size: 24px" spin />,
      form: this.$form.createForm(this),
      button_loading: false,
      spinning: false,
      tip: null,
      title: "查看",
      visible: false,
      okText: "保存",
      cancelText: "取消",
      departmentList: [], // 所属部门
      personList: personList, // 人员类型
      correctionList: [],
      levelList: [],
      xqluList: [],
      nationList: [],
      treeData: [],
      Dept: [],
      deptValue: null,
      personType: null,
      personName: '',
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 10 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14 },
        },
      },
      formItemLayout1: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 18 },
        },
      },
      formItemLayout2: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 3 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 21 },
        },
      },
      valueConsistsOf: 'ALL',
      normalizer (node) {
        // console.log('nodenodenodenode', node)
        return {
          id: node.id,
          label: node.name,
          children: node.children
        }
      },
    };
  },
  watch: {},
  computed: {},
  methods: {
    view (data) {
      // this.personName = findType(personList, this.personModalType)?.label
      // this.personType = this.personModalType
      if (data) {
        Object.assign(this, {
          spinning: true,
          visible: true,
          CodeDisabled: false,
          currentId: data.id,
        });
        this.initData(data);
      } else {
        this.visible = true;
        this.form.resetFields();
        this.currentId = null;
        this.personName = findType(personList, this.personModalType)?.label
        this.personType = this.personModalType
      }
      switch (this.actionType) {
        case "add":
          this.okText = '保存'
          this.title = "添加监管对象";
          break;
        case "edit":
          this.okText = '保存'
          this.title = "编辑监管对象";
          break;
        case "view":
          this.title = "查看监管对象";
          this.okText = "取消";
          break;
      }
    },
    handleSelect (node) {
      console.log(node)
      let str = `${node.pName}`
      let newStr = ''
      if (this.personModalType == 2) {
        if (str.indexOf('街道') != -1) {
          newStr = str.replace('街道', '司法所')
        } else if (str.indexOf('镇' != -1)) {
          newStr = str.replace('镇', '司法所')
        }
        this.form.setFieldsValue({
          helpUnit: newStr
        })
      }
    },
    initData (data) {
      this.deptValue = data.departmentid
      this.personType = data.personType
      this.personName = data.PersonTypeName
      setTimeout(() => {
        this.spinning = false;

        this.form.setFieldsValue({
          ...data,
          IDNumber: data.idNumber,
          isSignProtocol: data.isSignProtocol ? 1 : 0,
          isTransport: data.isTransport ? 1 : 0,
          isNotifyGA: data.isNotifyGA ? 1 : 0,
          isSendSeek: data.isSendSeek ? 1 : 0,
          isTypical: data.isTypical ? 1 : 0,
          receiptDate: this.$moment(data.receiptDate),
          releaseDate: this.$moment(data.releaseDate),
          correctionTimeStart: this.$moment(data.correctionTimeStart),
          correctionTimeEnd: this.$moment(data.correctionTimeEnd),
        });
      }, 500);
    },

    handleSubmit () {
      this.form.validateFields((err, values) => {
        if (this.deptValue == null) {
          this.$message.info('请输入部门!')
          return
        }
        if (!err) {
          let params = {
            ...values,
            id: this.currentId,
            personType: this.personType,
            departmentid: this.deptValue,
            releaseDate: this.$moment(values.releaseDate).format("YYYY-MM-DD"),
          };
          this.$emit("save", { ...params });
        }
      });
    },
    closeModal () {
      this.form.resetFields()
      this.visible = false;
    },


    removeChildrenIfNUll (data) {
      data.map(a => {
        if (a && a.children.length > 0) {
          this.removeChildrenIfNUll(a.children)
        } else {
          deleteChildrenIfNull(a)
        }
      })
    },

    handleType (v) {
      console.log(v);
      this.personType = v;
    },
    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },

    getImg (str) {
      const url = `${process.env.VUE_APP_API_BASE_URL}${str}`;
      return url;
    },
    viewPhoto (data) {
      this.$refs.photomodal.view(data);
    },
  },
};
</script>
<style lang="less">
.spin-content {
  padding: 20px;
}

.disable {
  pointer-events: none;
}
</style>
